<template>
  <div class="card-container my-2">
    <Row :gutter="40" class="panel-group">
      <Col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-text">连接数</div>
          <div class="card-panel-num">
            <Image class="elimage" :src="pic6" fit="fill" />
            <count-to
              :start-val="0"
              :end-val="resData1.connections || 0"
              :duration="1000"
            />
          </div>
        </div>
      </Col>
      <Col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-text">订阅数</div>
          <div class="card-panel-num">
            <Image class="elimage" :src="pic5" fit="fill" />
            <count-to
              :start-val="0"
              :end-val="resData1.subscriptions || 0"
              :duration="1000"
            />
          </div>
        </div>
      </Col>
      <Col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-text">主题数</div>
          <div class="card-panel-num">
            <Image class="elimage" :src="pic7" fit="fill" />
            <count-to
              :start-val="0"
              :end-val="resData1.topics || 0"
              :duration="1000"
            />
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
// ant-design-vue 组件（如果项目未全局注册，可在此处按需导入）
import { Card, Col, Image, Row } from 'ant-design-vue';
import { CountTo } from 'vue3-count-to';
import { getServiceMonitor } from '@/api/server';
// 图片资源
import pic5 from '../../../assets/images/pic5.png';
import pic6 from '../../../assets/images/pic6.png';
import pic7 from '../../../assets/images/pic7.png';

// 响应式数据，存放 API 返回的数据
const resData1 = ref({});

// 初始化数据，调用 API 接口
function initData() {
  getServiceMonitor().then((res) => {
    resData1.value = res.data;
  });
}

onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.panel-group {
  // margin-top: 18px;

  .card-panel {
    height: 75px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #fff;
    // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, 0.05);
    // border-radius: 8px;
    padding-left: 10px;

    .card-panel-icon {
      font-size: 48px;
    }

    .card-panel-text {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      // margin-top: 12px;
      // margin-bottom: 12px;
    }

    .elimage {
      width: 35px;
      height: 35px;
    }
    .card-panel-num {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24px;

      font-weight: bold;
      color: #fff;
    }
  }
}
</style>
